<template>
	<div class="add"><el-button type="primary" @click="add">添加</el-button></div>
	<el-dialog
		    v-model="dialogVisible_add"
		    title="Tips"
		    width="500"
		  >
		    <el-input type="text" v-model="name" placeholder="请输入添加的菜单名"></el-input>
		    <el-input type="text" v-model="url" placeholder="请输入添加的url"></el-input>
		    <el-input type="text" v-model="path" placeholder="请输入添加的组件路径"></el-input>
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="dialogVisible_add = false">Cancel</el-button>
		        <el-button type="primary" @click="addSubmit">
		          Confirm
		        </el-button>
		      </div>
		    </template>
	</el-dialog>
	<el-dialog
		    v-model="dialogVisible_update"
		    title="Tips"
		    width="500"
		  >
		    <el-input type="text" v-model="name" placeholder="请输入编辑的菜单名"></el-input>
		    <el-input type="text" v-model="url" placeholder="请输入编辑的url"></el-input>
		    <el-input type="text" v-model="path" placeholder="请输入编辑的组件路径"></el-input>
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="dialogVisible_update = false">Cancel</el-button>
		        <el-button type="primary" @click="updateSubmit">
		          Confirm
		        </el-button>
		      </div>
		    </template>
	</el-dialog>
	<el-dialog
	  v-model="dialogVisible_del"
	  title="Tips"
	  width="500"
	>
	  确认要删除 {{delName}} 吗？
	  <template #footer>
	    <div class="dialog-footer">
	      <el-button @click="dialogVisible_del = false">Cancel</el-button>
	      <el-button type="primary" @click="delSubmit">
	        Confirm
	      </el-button>
	    </div>
	  </template>
	</el-dialog>
	<el-table :data="tableData" style="width: 1200px;">
	  <el-table-column prop="name" label="菜单名" width="180" />
	  <el-table-column prop="url" label="url" />
	  <el-table-column prop="path" label="path" />
	  <el-table-column prop="createTime" label="创建时间" />
	  <el-table-column prop="updateTime" label="更新时间" />
	  <el-table-column>
	  	<template #header>操作</template>
	  	<template #default="scope">
	  	  <el-button type="warning" @click="update(scope.row)">编辑</el-button>
	  	  <el-button type="danger" @click="del(scope.row.id,scope.row.name)">删除</el-button>
	  	</template>
	  </el-table-column>
	</el-table>
</template>

<script setup>
	import {ref} from 'vue'
	const tableData = ref([])
	import {http} from "../components/http.js"
	function query(){
		http({url:"/queryMenu",method:"get"}).then(res=>{
			tableData.value = res.data.data
		})
	}
	query()
	const dialogVisible_add = ref(false)
	const name = ref("")
	const url = ref("")
	const path = ref("")
	function add(){
			dialogVisible_add.value = true
		}
	function addSubmit(){
		http({url:'/addMenu',method:'post',data:{name:name.value,url:url.value,path:path.value}}).then(res=>{
			dialogVisible_add.value = false
			query()
		})
	}
	const dialogVisible_del = ref(false)
	const delName = ref("")
	const delId = ref(undefined)
	function del(id,name){
			delId.value = id
			delName.value = name
			dialogVisible_del.value = true
		}
	function delSubmit(){
		http({url:"/delMenu?id="+delId.value,method:"get"}).then(res=>{
				dialogVisible_del.value = false
				query()
		})
	} 
	const dialogVisible_update = ref(false)
	const param = ref({})
	const updateId = ref(undefined)
	function update(p){
		dialogVisible_update.value = true
		name.value = p.name
		url.value = p.url
		path.value = p.path
		updateId.value = p.id
	}
	function updateSubmit(){
		http({url:"/updateMenu",method:"post",data:{name:name.value,url:url.value,path:path.value,id:updateId.value}}).then(res=>{
			dialogVisible_update.value = false
			query()
		})
	}
</script>

<style>
</style>